import React from "react";
import PressTouch from "./PressTouch";
import PropTypes from "prop-types";
import Config from "../Config";

export class MyButton extends React.Component {
  render() {
    const { name, style } = this.props;
    const { onClick } = this.props;
    return (
      <PressTouch
        bgColor={Config.BaseColor}
        activeColor={Config.activeColor}
        style={{
          borderRadius: '1.6rem',
          whiteSpace:'no-wrap',        
          height: "40px",
          lineHeight:"40px",
          textAlign:'center',
          color: '#fff', ...style 
        }}
        onClick={onClick}
      >
       {name}
      </PressTouch>
    );
  }
}

MyButton.propTypes = {
  name: PropTypes.string.isRequired,
  onClick: PropTypes.func.isRequired,
  style: PropTypes.object
};

export class MyButton2 extends React.Component {
  render() {
    const { name, style } = this.props;
    const { onClick } = this.props;
    return (
      <PressTouch
        style={{
          borderRadius: '1.6rem',         
          height: "40px",
          lineHeight:"40px",
          textAlign:'center',
          backgroundColor: "pink",
          ...style
        }}
        onClick={onClick}
      >
        {name}
      </PressTouch>
    );
  }
}

MyButton2.propTypes = {
  name: PropTypes.string.isRequired,
  onClick: PropTypes.func.isRequired,
  style: PropTypes.object
};

export class MyButton3 extends React.Component {
  render() {
    const { name, style } = this.props;
    const { onClick } = this.props;

    return (
      <PressTouch
        style={{
          borderRadius: '0.3rem',
          height: "40px",
          lineHeight:"40px",
          textAlign:'center',
          backgroundColor:'#fff',
          color: Config.BaseColor,
          fontSize: Config.btnSize,
          fontWeight:600,
          ...style
        }}
        onClick={onClick}
      >
      {name}
      </PressTouch>
    );
  }
}
export class MyButtonYz extends React.Component {
  render() {
    const { name, style,bgColor,disabled } = this.props;
    const { onClick } = this.props;
    return (
      <PressTouch
        bgColor={disabled === true?Config.activeColor:Config.BaseColor}
        activeColor={Config.activeColor}
        style={{
          borderRadius: '1.6rem',
          height: "40px",
          lineHeight:"40px",
          textAlign:'center',
          color: '#fff', ...style 
        }}
        onClick={onClick}
      >
        {name}
      </PressTouch>
    );
  }
}
MyButton3.propTypes = {
  name: PropTypes.string.isRequired,
  onClick: PropTypes.func.isRequired,
  style: PropTypes.object
};
